<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Cache-Control" content="max-age=300" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的订单 - 京淘</title>
<meta name="Keywords" content="java,京淘java" />
<meta name="description" content="在京淘中找到了29910件java的类似商品，其中包含了“图书”，“电子书”，“教育音像”，“骑行运动”等类型的java的商品。" />
<link rel="stylesheet" type="text/css" href="/css/base.css" media="all" />
<link rel="stylesheet" type="text/css" href="/css/myjd.common.css" media="all" />
<link rel="stylesheet" type="text/css" href="/css/myjd.commentImg.css" media="all" />
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/register/jdValidate.emReg.js"></script>
<script type="text/javascript" src="/js/lib-v1.js"></script>
    <style>
        .layui-upload-img{width: 50px; height: 50px;}

        #back{
            background-color: #CD2A2C; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="/js/base-2011.js" charset="utf-8"></script>
<!-- header start -->
<jsp:include page="../commons/header.jsp" />
<!-- header end -->

<div id="container">
<div class="w">
<div id="main">
    <div class="g-0">
        <div id="content" class="c-3-5">
            
            <div class="mod-main mod-comm extra-main" id="evalu01">
                        <div class="mt">
                            <h3>商品评价</h3>
                            <div id="ItemComment" class="extra-l ftx03 ml10">
                                <span id="tip-num">(
                                    <span class="num-comment">
                                        1
                                    </span>个待评价)
                                </span>
                            </div>
                        </div>
                         <div class="mc">
                            <div class="tb-void tb-line">
                                <table class="tb-void tb-line">
                                    <colgroup id="colgroup">
                                        <col width="490">
                                        <col width="130">
                                    </colgroup>
                                    <thead>
                                        <tr id="thead">
                                            <th>商品信息</th>
                                            <th>购买时间</th>
                                            <th>评价状态</th>
                                        </tr>
                                    </thead>
                                </table>
                                <table class="tb-void tb-line">
                                    <tbody id="tbo">
                                    <tr>
                                        <td>
                                            <ul class="pro-info" oid="3122336930" pid="975788" id="th-ul">
                                                <li class="fore1">
                                                    <div class="p-info clearfix">
                                                        <div class="p-img fl">
                                                            <a target="_blank" href="http://www.jt.com/items/${orderItem.itemId}.html">
                                                                <img width="50" height="50" title="${orderItem.title}" data-img="1" src="${orderItem.picPath}" class="err-product">
                                                            </a>
                                                        </div>
                                                        <div class="p-name fl">
                                                            <a target="_blank" href="http://www.jt.com/items/${orderItem.itemId}.html">${orderItem.title}</a>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="fore2">
                                                    <span class="ftx03"><fmt:formatDate value="${orderItem.created}" pattern="yyyy-MM-dd HH"/></span>
                                                </li>
                                                <li id="sendComment" class="fore3 forem">
                                                        <a href="javascript:void(0)" voucherstatus="0" class="pj" alt="975788" title="发评价拿京豆" catefirst="670" catesecond="716" catethird="720" onclick="submitForm()"><b class="icon-show">发表评价</b></a>
                                                </li>

                                            </ul>

                                            <div id="myComment">
                                            <div  class="comment-box prompt01" oid="3122336930" pid="975788" style="display: block;">
                                                <div class="box-t"></div>
                                                <div class="form" tagflag="true" isconspros="0" pid="975788">
                                                    <div class="item"><span class="label"><em>*</em>评分：</span>
                                                        <div class="fl">
                                                            <span class="commstar">
                                                                <a href="javascript:;" class="star1" _val="1" onclick="setStar(1,$(this))"></a>
                                                                <a href="javascript:;" class="star2" _val="2" onclick="setStar(2,$(this))"></a>
                                                                <a href="javascript:;" class="star3" _val="3" onclick="setStar(3,$(this))"></a>
                                                                <a href="javascript:;" class="star4" _val="4" onclick="setStar(4,$(this))"></a>
                                                                <a href="javascript:;" class="star5" _val="5" onclick="setStar(5,$(this))"></a>
                                                            </span>
                                                            <input type="hidden" name="commentStar" id="commentStar">
                                                            <div class="clr"></div>
                                                        </div>
                                                        <span class="msg-error-01 ml10 hide">你的评分是我们前进的动力</span>
                                                        <div class="clr"></div>
                                                    </div>

                                                    <div class="item tagEl" style="">
                                                        <span class="label"><em>*</em>标签：</span>
                                                        <div class="fl">
                                                            <ul class="tips-list">
                                                                <li vid="132"><input name="ck" type="checkbox" value="价格便宜" />价格便宜</li>
                                                                <li vid="132"><input name="ck" type="checkbox" value="质量不错"/>质量不错</li>
                                                                <li vid="132"><input name="ck" type="checkbox" value="客服很专业"/>客服很专业</li>
                                                                <li vid="132"><input name="ck" type="checkbox" value="物流很快"/>物流很快</li>
                                                            </ul>
                                                            <span class="msg-error-01 hide"></span>
                                                            <div class="clr"></div>
                                                        </div>
                                                        <div class="clr"></div>
                                                    </div>

                                                    <div class="item item01 xindeEl">
                                                        <span class="label"><em>*</em>评论：</span>
                                                        <div class="cont">
                                                            <textarea id="comment" class="area area01" placeholder="商品是否给力？快分享你的购买心得吧~"></textarea>
                                                            <div class="msg-text ftx-03">10-500字</div>
                                                        </div>
                                                    </div>

                                                    <div class="item imgEl" id="imgContainer_3122336930_975788" style="position: relative;">
                                                        <span class="label"><em>*</em>晒单：</span>
                                                        <div class="fl">
                                                            <div class="upload-img-box">
                                                                <div class="img-list">
                                                                    <input type="hidden" id="imgs1" value="">
                                                                    <div class="layui-upload" style="width: 500px">
                                                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                                                            预览图：
                                                                            <div class="layui-upload-list" id="picList" style="width: 100%"></div>
                                                                        </blockquote>
                                                                        <button type="button" class="layui-btn" id="selectPic" style="background-color: #CE2C08">
                                                                            <i class="layui-icon" >&#xe67c;</i>点击上传
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <br/>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
        </div>
    </div>
    <div id="left" class="g-3-5 c-0">
        <!--js 加载异步加载的左侧菜单 -->
    <div id="menu"><h3>我的交易</h3><dl class="fore1"><dt><a target="_blank" clstag="homepage|keycount|home2013|hdd" id="_MYJD_ordercenter" href="http://www.jt.com/order/myOrder.html" class="curr">我的订单</a></dt></dl><dl class="fore2"><dt><a target="_blank" clstag="homepage|keycount|home2013|hyushou" id="_MYJD_yushou" href="http://yushou.jd.com/member/qualificationList.action">我的预售</a></dt></dl><dl class="fore3"><dt><a target="_blank" clstag="homepage|keycount|home2013|hbdsh" id="_MYJD_locallife" href="http://life.jd.com/localOrder/iniOrder.do">我的本地生活</a></dt></dl><dl class="fore4"><dt><a target="_blank" clstag="homepage|keycount|home2013|hdqs" id="_MYJD_ding" href="http://ding.jd.com/plan/showPlans.action">我的定期送</a></dt></dl><dl class="fore5"><dt><a target="_blank" clstag="homepage|keycount|home2013|htg" id="_MYJD_tuan" href="http://tuan.jd.com/order/index.php">我的团购</a></dt></dl><dl class="fore6"><dt><a target="_blank" clstag="homepage|keycount|home2013|hjg" id="_MYJD_protection" href="http://jiabao.jd.com/protecting">价格保护</a></dt></dl><dl class="fore7"><dt class="hc"><b></b><a target="_blank" id="_MYJD_gz" href="#none">我的关注</a></dt><dd class="fore1"><div class="item" id="_MYJD_product"><a target="_blank" clstag="homepage|keycount|home2013|hgz" href="http://t.jd.com/home/follow">关注的商品</a></div></dd><dd class="fore2"><div class="item" id="_MYJD_vender"><a target="_blank" clstag="homepage|keycount|home2013|hdp" href="http://t.jd.com/vender/followVenderList.action">关注的店铺</a></div></dd><dd class="fore3"><div class="item" id="_MYJD_activity"><a target="_blank" clstag="homepage|keycount|home2013|hhd" href="http://t.jd.com/activity/followActivityList.action">关注的活动</a></div></dd><dd class="fore4 last "><div class="item" id="_MYJD_history"><a target="_blank" clstag="homepage|keycount|home2013|hll" href="http://my.jd.com/history/list.html">浏览历史&nbsp;<img width="24" height="11" src="/images/myjd-new-ico.png"></a></div></dd></dl><dl class="fore8"><dt class="hc"><b></b><a target="_blank" id="_MYJD_zc" href="#none">我的资产</a></dt><dd class="fore1"><div class="item" id="_MYJD_cashbox"><a target="_blank" clstag="homepage|keycount|home2013|hjk" href="http://jinku.pay.jd.com/xjk/income.action">我的小金库</a></div></dd><dd class="fore2"><div class="item" id="_MYJD_credit"><a clstag="homepage|keycount|home2013|hbt" tag="213" href="http://baitiao.jd.com/creditUser/record">京东白条</a>&nbsp;</div></dd><dd class="fore3"><div class="item" id="_MYJD_tx"><a target="_blank" clstag="homepage|keycount|home2013|htx" href="http://mobile.jd.com/yyswt/myjd.do">京东通信</a></div></dd><dd class="fore4"><div class="item" id="_MYJD_balance"><a target="_blank" clstag="homepage|keycount|home2013|hye" href="http://mymoney.jd.com/finance/recently.action">余额</a></div></dd><dd class="fore5"><div class="item" id="_MYJD_ticket"><a target="_blank" clstag="homepage|keycount|home2013|hyh" href="http://quan.jd.com/user_quan.action">优惠券</a></div></dd><dd class="fore6"><div class="item" id="_MYJD_card"><a target="_blank" clstag="homepage|keycount|home2013|he" href="http://giftcard.jd.com/giftcard/index.action">京东卡/E卡</a></div></dd><dd class="fore7 last"><div class="item" id="_MYJD_bean"><a target="_blank" clstag="homepage|keycount|home2013|hjd" href="http://bean.jd.com/myJingBean/list">京豆</a></div></dd></dl><dl class="fore9 last "><dt class="hc"><b></b><a target="_blank" id="_MYJD_fw" href="#none">客户服务</a></dt><dd class="fore1"><div class="item" id="_MYJD_repair"><a target="_blank" clstag="homepage|keycount|home2013|hfx" href="http://myjd.jd.com/repair/orderlist.action">返修退换货</a></div></dd><dd class="fore2"><div class="item" id="_MYJD_refundment"><a target="_blank" clstag="homepage|keycount|home2013|hqx" href="http://rps.fm.jd.com/refund/refundList">取消订单记录</a></div></dd><dd class="fore3 last "><div class="item" id="_MYJD_complaint"><a target="_blank" clstag="homepage|keycount|home2013|htx" href="http://myjd.jd.com/opinion/orderList.action">我的投诉</a></div></dd></dl></div><div id="da-game" class="da-box m"><a href="http://c.nfa.jd.com/adclick?sid=14&amp;cid=720&amp;aid=4497&amp;bid=0&amp;unit=85943&amp;advid=131939&amp;guv=&amp;url=http://wan.jd.com/yeyou/play.html?gameId=86&amp;gateWayId=s40"><img width="100%" src="/images/547e6a57N75c2f016.gif" alt=""></a></div><div id="da-home" class="da-box"><a href="http://c.nfa.jd.com/adclick?sid=2&amp;cid=102&amp;aid=413&amp;bid=8305&amp;unit=65429&amp;advid=166662&amp;guv=&amp;url=http://vivoshop.jd.com" target="_blank"><img width="100%" height="100%" alt="" app="image:poster" src="/images/549d03d0N59b1f026.jpg"></a></div></div>
    <span class="clr"></span>
</div>
</div>
</div>

<!-- footer start -->
<jsp:include page="../commons/footer.jsp" />
<!-- footer end -->

<script src="/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'upload','jquery','layer'] ,function() {
        var form = layui.form
            , $ = layui.jquery
            , layer = layui.layer
            , upload = layui.upload
            , images="";

        upload.render({
            elem: '#selectPic'
            , url: '/order/comment/picUpload'
            , multiple: true
            , choose: function (obj) {
                //预读本地文件
                var image = $('#picList')
                image.empty("div");
                obj.preview(function (index, file, result) {
                    image.append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            , done: function (res, index) {  //每个上传操作的回调
                debugger;
                if (res.status == 200) { //上传成功
                  images+=res.data+",";
                }
            }
            , allDone: function (obj) {  //全部上传的回调
                //上传成功
                images=images.substring(0,images.lastIndexOf(","));
                debugger;
                $("#imgs1").val(images);
            }
        });
    });

    /**
     * 页面加载完成之后执行
     */
    $(function(){
        var flag="${row.id}";
        if(flag){
           readyComment();
        }
    });

    
    /**
     * 实现星星动态展示
     * @param val 每个星星代表的分数
     * @param b 星星所在标签
     */
    function setStar(val, b) {
        var input=b.parent().parent();
        input.find("input").val(val);
        for(var i=1;i<=val;i++){
            $(".star"+i).css("background-Image","url(/images/commstar.jpg)").css("background-repeat","repeat-x").css("background-origin","left").css("background-origin","top").css("margin-top","0px");
        }
        for(var i=val+1;i<6;i++){
            $(".star"+i).css("background-Image","url(/images/commstar.jpg)").css("background-repeat","repeat-x").css("background-origin","0").css("background-origin","-21").css("margin-top","20px");
        }
    }

    /**
     * 上传表单信息
     */
   function submitForm() {
       var itemId="${orderItem.itemId}";
       var itemPic="${orderItem.picPath}";
       var orderId="${orderItem.orderId}";
       var created="${orderItem.created}";
       var updated=created;
       var title="${orderItem.title}";
       var grade=$("#commentStar").val();

       var tags="";
       var comment=$("#comment").val();
       var boxs=document.getElementsByName("ck");
       /*获取复选框的值，并进行拼接*/
       for(var i=0;i<boxs.length;i++) {
           if (boxs[i].checked) //取到对象数组后，我们来循环检测它是不是被选中
               tags += boxs[i].value + ',';   //如果选中，将value添加到变量s中
       }
       /*格式化复选框的值*/
       var index=tags.lastIndexOf(",");
       tags=tags.substring(0,index);
       /**获取用户的晒图*/
       var picList=$("#imgs1").val();
       console.log(picList);
       var params={
           "itemId"   :  itemId,
           "itemPic"  :  itemPic,
           "orderId"  :  orderId,
           "created"  :  created,
           "updated"  :  updated,
           "title"    :  title,
           "grade"    :  grade,
           "tags"     :  tags,
           "comment"  : comment,
           "picList"  : picList
       }
       $.getJSON("http://www.jt.com/order/comment/save.html",params,function(result) {
           if(result.status==200){
                window.location.reload();
           }else{
               showMessage('网络延迟，请稍后再试');
           }
       })
   };

   /**
     * 评论成功后展示星级
     */
   function afterCommentStarInit(val) {
       for(var i=1;i<=val;i++){
           $(".star"+i).css("background-Image","url(/images/commstar.jpg)").css("background-repeat","repeat-x").css("background-origin","left").css("background-origin","top").css("margin-top","0px");
       }
   }

    /**
     * 评论成功后的展示js
     */
   function readyComment(item) {
       $("#myComment").empty();
       let itemComment="<span id='tip-num'>( <span class='num-comment'>0</span>个待评价)</span>";
       $("#ItemComment").html(itemComment);
       let sendComment=" <span><b class=\"icon-show\">已评价</b></span>"
       $("#sendComment").html(sendComment);
       let back="<div><input id='back' type='button' value='返回' onclick='back()'/> </div>";
       $("#tbo").append(back);
        let tags="${row.tags}".split(",");
        let li=``;
        $.each(tags,function(index,tag){
            li+=`<li vid="132">`+tag+`</li>`;
        })
        let comment = "${row.comment}";
        let userImages="${row.picList}".split(",");
        let imageList=``;
        $.each(userImages,function(index,image){
            imageList+=`<img src='`+image+`' class='layui-upload-img'/>`;
        })
       let commentList=`
            <div  class="comment-box prompt01" oid="3122336930" pid="975788" style="display: block;">
                <div class="box-t"/>
                <div class="form" tagflag="true" isconspros="0" pid="975788">
                    <div class="item"><span class="label"><em>*</em>评分：</span>
                        <div class="fl">
                            <span class="commstar">
                                <a href="javascript:;" class="star1" _val="1" />
                                <a href="javascript:;" class="star2" _val="2" />
                                <a href="javascript:;" class="star3" _val="3" />
                                <a href="javascript:;" class="star4" _val="4" />
                                <a href="javascript:;" class="star5" _val="5" />
                            </span>
                            <input type="hidden" name="commentStar" id="commentStar">
                            <div class="clr"></div>
                        </div>
                        <span class="msg-error-01 ml10 hide">你的评分是我们前进的动力</span>
                        <div class="clr"></div>
                    </div>

                    <div class="item tagEl" style="">
                        <span class="label"><em>*</em>标签：</span>
                        <div class="fl">
                            <ul class="tips-list">
                              ${"${li}"}
                            </ul>
                            <span class="msg-error-01 hide"></span>
                            <div class="clr"></div>
                        </div>
                        <div class="clr"></div>
                    </div>

                    <div class="item item01 xindeEl">
                        <span class="label"><em>*</em>评论：</span>
                        <div class="cont">
                            <p>${"${comment}"}</p>
                        </div>
                    </div>

                    <div class="item imgEl" id="imgContainer_3122336930_975788" style="position: relative;">
                        <span class="label"><em>*</em>晒单：</span>
                        <div class="fl">
                            <div class="upload-img-box">
                                <div class="img-list">
                                    <div class="layui-upload" style="width: 500px">
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            <div class="layui-upload-list" id="picList" style="width: 100%">
                                                 ${"${imageList}"}
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br/>
                    </div>
                </div>
            </div>
       `;
        $("#myComment").append(commentList);
        afterCommentStarInit(${row.grade});
   }

    /**
     * 返回
     */
    function back(){
        window.location.href="http://www.jt.com/order/myOrder.html";
    }

</script>

</body>
</html>